<template>
  <div class="my-order">
    <order-tab v-model="selectedTabIndex"></order-tab>
    <div class="dividing-big"></div>
    <div class="order-list">
      <div class="order-list-per"
           v-for="(item,index) in page.list">
        <order-header :orderData="item"></order-header>
        <div class="dividing-small"></div>
        <div class="order-list-per-sub">
          <div class="sub-list"
               v-for="(itemSub,indexSub) in item.sublist">
            <order-cell :orderData="itemSub"
                        @click.native="clickOrder(itemSub,indexSub)"></order-cell>
          </div>
          <order-bottom :orderData="item"
                        :discount="discount"
                        @reRequestNet="reRequestNet"></order-bottom>
        </div>
        <div class="dividing-big"></div>
      </div>
      <span class="loadding-end"
            ref="end"
            v-if="page.loaded && !page.more > 0">木有啦,滑到最后了~</span>

      <div class="loadding-up"
           v-if="(page.loading && page.more)&&page.list.length > 0">
        <div class="loadding-up-div"></div>
      </div>
      <error-page :imgWidth="257"
                  :imgHeight="295"
                  top="95"
                  emptyImg="empty-shopcat"
                  :type="'text'"
                  :zIndex="0"
                  emptyDesc="<span style='color:RGBA(153, 153, 153, 1);font-size:0.30rem'>您还没订单哦...</span>"
                  v-if="page.loading === false && page.list.length === 0" />
    </div>
  </div>
</template>

<script>
import mixins from '@/mixins'
import orderTab from './my-order-cell/order-tab'
import orderHeader from './my-order-cell/order-header'
import orderCell from './my-order-cell/order-cell'
import orderBottom from './my-order-cell/order-bottom'
import ErrorPage from '@/components/error-page'
import pageList from '@/components/common-js/page-list'
export default {
  name: 'my-order',
  data () {
    return {
      selectedTabIndex: 0,
      searchData: {
        orderstatus: ''
      },
      discount: 0,
      url: '/tOrder/myOrderList.json'
    }
  },
  mixins: [mixins, pageList],
  watch: {
    selectedTabIndex: {
      immediate: true,
      async handler (val) {
        if (val === 0) {
          this.searchData.orderstatus = null
        } else {
          this.searchData.orderstatus = val - 1
        }
        await this.requestNet(true)
        this.pull()
      }
    }
  },
  methods: {
    reRequestNet () {
      this.requestNet(true)
    },
    clickOrder (item, index) {
      this.$router.push({name: 'order-details', query: {orderid: item.orderid}})
    },
    async requestNet (isReset = false) {
      this.BIND_LOADING(true)
      await this.loadPageList(this.url, isReset)
      if (this.page.list && this.page.list.length > 0) {
        let listZero = this.page.list[0]
        this.discount = (listZero && listZero.sublist && listZero.sublist[0].discount) || 0
      }
      this.BIND_LOADING(false)
    },
    pull () {
      let self = this
      this.observer = new IntersectionObserver(function (val) {
        if (val[0].isIntersecting) {
          self.loadPageList(this.url)
        } else {
        }
      })
      this.$nextTick(() => {
        this.$refs.end && this.observer.observe(this.$refs.end)
      })
    }
  },
  mounted () {
  },
  components: {
    orderTab,
    orderHeader,
    orderCell,
    orderBottom,
    ErrorPage
  }
}
</script>

<style lang="stylus" scoped>
.my-order {
  .dividing-big {
    width: 100%;
    height: 15px;
    background: RGBA(241, 241, 241, 1);
  }

  .dividing-small {
    width: 100%;
    height: 1.3px;
    background: RGBA(241, 241, 241, 1);
  }

  .order-list {
    .order-list-per {
      .order-list-per-sub {
        padding-left: 25px;
        padding-right: 25px;
        box-sizing: border-box;
      }
    }
  }
}
</style>
